<template>
  <section class="page podcast background-my" style="overflow-y: hidden;" >
    <headerbar class="podcast_header background-my">
      {{ title }}
    </headerbar>
    <!-- <section class="search">
      <div class="icon-search">
        <img
          src="../../../../../static/images/dangjian/home/icon-search-fff.png"
          alt=""
        />
      </div>
      <input type="text" v-model="keyword" placeholder="请输入关键词搜索" />
      <div v-if="keyword" @click="removeKeyword()" class="icon-colse">
        <img
          src="../../../../../static/images/dangjian/home/icon-close-e6e6e6.png"
          alt=""
        />
      </div>
    </section> -->
    <section class="area_list">
<!--      <h1 class="title">热门</h1>-->
      <div class="clearfix">
        <fetchData :loading="isLoading" :data="regionalList"></fetchData>
        <div
          class="item"
          v-for="(data, index) in regionalList"
          :key="index"
          @click="saveRegional(data)"
        >
          <div class="left"><span>{{data.name}}
            </span>
          <span v-if="data.isHot === 1" class="icon-fire"></span>
          </div>
          <div class="right" v-if="isNew(data.lastPublishTime)"><i class="icon-new"></i></div>
        </div>
        <noData v-if="!isLoading && regionalList.length === 0"></noData>
      </div>
    </section>
  </section>
</template>

<script>
import moment from "moment";

export default {
  name: "podcastRegionalChoice",
  data() {
    return {
      title: "切换党工委",
      // keyword: "", //输入框关键字
      isLoading: true,
      regionalList: [
        /* {
          name: "观山湖区党工委",
          id: "1",
        },
        {
          name: "息烽县党工委",
          id: "2",
        }, */
      ]
    };
  },
  watch: {
    $route(to, from) {},
  },
  created() {
    this.getRegionalList();
  },
  beforeDestroy() {
  },
  methods: {
    // 清空输入框
    /* removeKeyword() {
      this.keyword = "";
    }, */
    isNew(lastPublishTime){//new的标识只显示2天 48小时，超过不显示
      // console.log('timetime = ',new Date(lastPublishTime));
      // console.log('new Date() = ',new Date());
      // console.log('new Date()new Date()',parseInt(moment(new Date()).subtract(moment(new Date(lastPublishTime))).hours()));
      return (this.tools.NotIsNull(lastPublishTime) && this.tools.formatDataUtil(lastPublishTime, new Date(), 'h')<48)
    },
    // 获取区域数据
    getRegionalList() {
      this.isLoading = true;
      let data = {
      };
      return this.fetchService.play_areaConfigQuery(data).then((res) => {
        this.isLoading = false;
        if (res.code !== 0) {
          return this.tools.tip(res.message || '接口服务出错，请联系管理员')
        }
        this.regionalList = res.data;
      });
    },
    // 返回区域信息
    saveRegional(data) {
      this.$store.state.regionalInfo = data;
      if (this.jumpTime && Date.now() - this.jumpTime < 300) return false;
      this.jumpTime = Date.now();
      this.tools.back();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/stylus/moon.scss";
// 搜索
.search {
  margin:0 pxToRem(30px);
  // background: #fff;
    background: rgba($color: #fff, $alpha: 0.15);
  border-radius: pxToRem(10px);
  position: relative;
  height: pxToRem(70px);
  font-size: 14PX;
  input {
    border-radius: pxToRem(10px);
    width: 100%;
    height: pxToRem(70px);
    background: none;
    margin: 0;
    padding: 0 pxToRem(54px);
    border: none;
    font-size: 14PX;
    font-weight: 400;
    text-align: left;
    color: #fff;
    font-family: dang;
    &::placeholder {
      font-family: inherit;
      font-size: 14PX;
    }
  }
  .icon-search {
    position: absolute;
    left: pxToRem(16px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: pxToRem(26px);
    height: pxToRem(27px);
    img {
      @include fullImg();
    }
  }
  .icon-colse {
    position: absolute;
    top: 48%;
    right: pxToRem(16px);
    transform: translateY(-50%);
    z-index: 3;
    width: pxToRem(26px);
    height: pxToRem(27px);
    img {
      @include fullImg();
    }
  }
}
.icon-fire{
    display: inline-block;
    background: url('../../../../../static/images/dangjian/video/icon-fire.png') no-repeat center;
    width: 0.4rem;
    height: 0.4rem;
    background-size: 100% 100%;
    margin-right: 0.13333rem;
}
.icon-new{
    display: inline-block;
    background: url('../../../../../static/images/dangjian/video/icon-new-orange.png') no-repeat center;
    width: 1rem;
    height: 1rem;
    background-size: 100% 100%;
}
.area_list{
  height: 85vh;
  padding:pxToRem(20px) pxToRem(30px);
  .title{
    font-size: 14PX;
    color: #fff;
    margin: pxToRem(10px) 0;
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 49%;
    flex-shrink: 0;
    float: left;
    text-align: center;
    font-size: 14PX;
    color: #fff;
    background: rgba($color: #fff, $alpha: 0.15);
    margin-bottom: pxToRem(10px);
    height: pxToRem(64px);
    line-height: pxToRem(64px);
    margin-left: 2%;
    border-radius: 6px;
    overflow: hidden;
    &:nth-child(2n + 1) {
      margin-left: 0;
    }
    .left{
      width: 80%;
      padding-left: 20%;
    }
    .right{
      display: flex;
      padding-right: 5%;
    }
  }
}
.background-my{
  background: #181824;
}
</style>
